<template>
  <div class="wrapper">
    <use-header title="权限列表" sub-title="点击后面复制，直接在代码中使用"/>
          <a-card size="small">
          <div class="perm-list">
          <div class="perm-list-group">
            <div class="perm-list-group-title">
              工作台权限
            </div>
            <div class="perm-list-item" v-for="item in permissions.workbench">
              <div class="perm-list-item-title">
                {{item.title}}
                <a-tag v-if="item.key">
                  <a-typography-text class="font-size-sm" copyable>{{item.key}}</a-typography-text>
                </a-tag>
              </div>
              <div class="perm-list-item-content" v-if="item.actions">
                <a-tag v-for="action in item.actions">
                  {{getPermActionText(action)}}
                  <a-typography-text class="font-size-sm" copyable>{{action}}</a-typography-text>
                </a-tag>
              </div>
            </div>
          </div>
          <div class="perm-list-group border-top">
            <div class="perm-list-group-title">
              管理后台权限
            </div>
            <div class="perm-list-item" v-for="item in permissions.admin">
              <div class="perm-list-item-title">
                {{item.title}}
                <a-tag v-if="item.key">
                  <a-typography-text class="font-size-sm" copyable>{{item.key}}</a-typography-text>
                </a-tag>
              </div>
              <div class="perm-list-item-content" v-if="item.actions">
                <a-tag v-for="action in item.actions">
                  {{getPermActionText(action)}}
                  <a-typography-text class="font-size-sm" copyable>{{action}}</a-typography-text>
                </a-tag>
              </div>
            </div>
          </div>
        </div>
          </a-card>
  </div>
</template>

<script setup lang="ts">
import UseHeader from "@/components/UseHeader.vue";
import {getPermActionText, getPermissions} from "@/utils/permission.ts";
const permissions = getPermissions();
</script>

<style scoped>
  .perm-list-item {
    display: flex;
    cursor: default;
  }
  .border-top,
  .perm-list-item+.perm-list-item{
    border-top: 1px solid #f0f0f0;
  }
  .perm-list-item-title{
    flex: 0 0 230px;
    padding: 8px 12px;
  }
  .perm-list-group-title {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
  }
  .perm-list-item-content {
    border-left: 1px solid #f0f0f0;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }
  .perm-list-item:nth-child(odd) {
    background-color: #fafafa;
  }
</style>